<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
    <title>
        控件 &middot; Mower-前端开发框架
    </title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="mower/admin/css/mower.min.css" rel="stylesheet">
    <!-- Documentation extras -->
    <link href="assets/css/docs.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Favicons -->
    <link rel="icon" href="../favicon.ico">
</head>

<body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../index.html" class="navbar-brand">Mower</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="getting-started.html">开始</a>
                    </li>
                    <li>
                        <a href="css.html">基础</a>
                    </li>
                    <li class="active">
                        <a href="controls.html">控件</a>
                    </li>
                    <li>
                        <a href="components.html">组件</a>
                    </li>
                    <li>
                        <a href="javascript.html">Javascript插件</a>
                    </li>
                    <li>
                        <a href="view.html">视图</a>
                    </li>
                </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li><a href="examples/admin/">示例</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
        <div class="container">
            <h1>控件</h1>
            <p>无数可复用的基础元素，包括字体图标、按钮、进度条、面包屑、分割等更多功能。</p>
        </div>
    </div>
    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-9" role="main">
                <div class="bs-docs-section">
                    <h2 id="glyphicons" class="page-header">图标</h2>
                    <p>图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。</p>
                    <h3 class="item-header" id="glyphicons-when-to-use">何时使用图标？</h3>
                    <p>同一个应用程序中的图标应该具有一致的外观及用户行为响应，应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况：</p>
                    <ul>
                      <li>用于应用程序头部，便于用户识别正在使用的应用；</li>
                      <li>用于按钮，对于一些常用的按钮可以使用图标取代按钮中的文本，使得界面更加简洁；</li>
                      <li>用于提示消息，图标能指明消息类型，便于用户无需仔细阅读消息内容就可以迅速做出决策；</li>
                      <li>用于一些简单但重要列表，在列表项目前面加上合适的图标能大大增强列表识别程度；</li>
                      <li>等同与标签，图标能简明表达项目或信息类型。</li>
                    </ul>
                    <h3 class="item-header" id="glyphicons-examples">使用图标字体</h3>
                    <p>在图标字体没有普及之前，图标通常是通过图片来展示，如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整，例如定义大小、颜色及特殊效果。在Mower中将使用图标字体作为系统图标集方案。采用开源web图标字体<a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>是一个不错的选择。</p>
                    <p>在Font Awesome 4.2.0中提供了519个图标,下面罗列出常用的图标。</p>
                    <div class="icons bs-example">
                      <ul class='clearfix'>
                        <li><i class="fa fa-music"></i> music</li>
                        <li><i class="fa fa-search"></i> search</li>
                        <li><i class="fa fa-envelope-o"></i> envelope-o</li>
                        <li><i class="fa fa-heart"></i> heart</li>
                        <li><i class="fa fa-star"></i> star</li>
                        <li><i class="fa fa-user"></i> user</li>
                        <li><i class="fa fa-film"></i> film</li>
                        <li><i class="fa fa-th-large"></i> th-large</li>
                        <li><i class="fa fa-th"></i> th</li>
                        <li><i class="fa fa-th-list"></i> th-list</li>
                        <li><i class="fa fa-check"></i> check</li>
                        <li><i class="fa fa-remove"></i> remove</li>
                        <li><i class="fa fa-power-off"></i> power-off</li>
                        <li><i class="fa fa-cog"></i> cog</li>
                        <li><i class="fa fa-trash"></i> trash</li>
                        <li><i class="fa fa-home"></i> home</li>
                        <li><i class="fa fa-file"></i> file</li>
                        <li><i class="fa fa-clock-o"></i> clock-o</li>
                        <li><i class="fa fa-download"></i> download</li>
                        <li><i class="fa fa-upload"></i> upload</li>
                        <li><i class="fa fa-inbox"></i> inbox</li>
                        <li><i class="fa fa-play-circle"></i> play-circle</li>
                        <li><i class="fa fa-repeat"></i> repeat</li>
                        <li><i class="fa fa-refresh"></i> refresh</li>
                        <li><i class="fa fa-list-alt"></i> list-alt</li>
                        <li><i class="fa fa-lock"></i> lock</li>
                        <li><i class="fa fa-flag"></i> flag</li>
                        <li><i class="fa fa-headphones"></i> headphones</li>
                        <li><i class="fa fa-volume-off"></i> volume-off</li>
                        <li><i class="fa fa-volume-up"></i> volume-up</li>
                        <li><i class="fa fa-qrcode"></i> qrcode</li>
                        <li><i class="fa fa-barcode"></i> barcode</li>
                        <li><i class="fa fa-tag"></i> tag</li>
                        <li><i class="fa fa-tags"></i> tags</li>
                        <li><i class="fa fa-book"></i> book</li>
                        <li><i class="fa fa-bookmark"></i> bookmark</li>
                        <li><i class="fa fa-print"></i> print</li>
                        <li><i class="fa fa-camera"></i> camera</li>
                        <li><i class="fa fa-font"></i> font</li>
                        <li><i class="fa fa-bold"></i> bold</li>
                        <li><i class="fa fa-align-justify"></i> align-justify</li>
                        <li><i class="fa fa-list"></i> list</li>
                        <li><i class="fa fa-picture-o"></i> picture-o</li>
                        <li><i class="fa fa-pencil"></i> pencil</li>
                        <li><i class="fa fa-adjust"></i> adjust</li>
                        <li><i class="fa fa-map-marker"></i> map-marker</li>
                        <li><i class="fa fa-tint"></i> tint</li>
                        <li><i class="fa fa-edit"></i> edit</li>
                        <li><i class="fa fa-share"></i> share</li>
                        <li><i class="fa fa-check"></i> check</li>
                        <li><i class="fa fa-arrows-alt"></i> arrows-alt</li>
                        <li><i class="fa fa-step-backward"></i> step-backward</li>
                        <li><i class="fa fa-fast-backward"></i> fast-backward</li>
                        <li><i class="fa fa-backward"></i> backward</li>
                        <li><i class="fa fa-play"></i> play</li>
                        <li><i class="fa fa-pause"></i> pause</li>
                        <li><i class="fa fa-stop"></i> stop</li>
                        <li><i class="fa fa-forward"></i> forward</li>
                        <li><i class="fa fa-fast-forward"></i> fast-forward</li>
                        <li><i class="fa fa-step-forward"></i> step-forward</li>
                        <li><i class="fa fa-eject"></i> eject</li>
                        <li><i class="fa fa-chevron-left"></i> chevron-left</li>
                        <li><i class="fa fa-chevron-right"></i> chevron-right</li>
                        <li><i class="fa fa-remove-circle"></i> remove-circle</li>
                        <li><i class="fa fa-arrow-left"></i> arrow-left</li>
                        <li><i class="fa fa-arrow-right"></i> arrow-right</li>
                        <li><i class="fa fa-arrow-up"></i> arrow-up</li>
                        <li><i class="fa fa-arrow-down"></i> arrow-down</li>
                        <li><i class="fa fa-share-alt"></i> share-alt</li>
                        <li><i class="fa fa-expand"></i> expand</li>
                        <li><i class="fa fa-compress"></i> compress</li>
                        <li><i class="fa fa-plus"></i> plus</li>
                        <li><i class="fa fa-minus"></i> minus</li>
                        <li><i class="fa fa-asterisk"></i> asterisk</li>
                        <li><i class="fa fa-gift"></i> gift</li>
                        <li><i class="fa fa-leaf"></i> leaf</li>
                        <li><i class="fa fa-plane"></i> plane</li>
                        <li><i class="fa fa-calendar"></i> calendar</li>
                        <li><i class="fa fa-random"></i> random</li>
                        <li><i class="fa fa-comment"></i> comment</li>
                        <li><i class="fa fa-chevron-up"></i> chevron-up</li>
                        <li><i class="fa fa-chevron-down"></i> chevron-down</li>
                        <li><i class="fa fa-shopping-cart"></i> shopping-cart</li>
                        <li><i class="fa fa-folder-open"></i> folder-open</li>
                        <li><i class="fa fa-arrows-v"></i> arrows-v</li>
                        <li><i class="fa fa-arrows-h"></i> arrows-h</li>
                        <li><i class="fa fa-bar-chart"></i> bar-chart</li>
                        <li><i class="fa fa-camera-retro"></i> camera-retro</li>
                        <li><i class="fa fa-key"></i> key</li>
                        <li><i class="fa fa-cogs"></i> cogs</li>
                        <li><i class="fa fa-comments"></i> comments</li>
                        <li><i class="fa fa-thumbs-up"></i> thumbs-up</li>
                        <li><i class="fa fa-thumbs-down"></i> thumbs-down</li>
                        <li><i class="fa fa-star-half"></i> star-half</li>
                        <li><i class="fa fa-sign-out"></i> sign-out</li>
                        <li><i class="fa fa-external-link"></i> external-link</li>
                        <li><i class="fa fa-sign-in"></i> sign-in</li>
                        <li><i class="fa fa-trophy"></i> trophy</li>
                        <li><i class="fa fa-upload"></i> upload</li>
                        <li><i class="fa fa-phone"></i> phone</li>
                        <li><i class="fa fa-phone-square"></i> phone-square</li>
                        <li><i class="fa fa-credit-card"></i> credit-card</li>
                        <li><i class="fa fa-rss"></i> rss</li>
                        <li><i class="fa fa-bullhorn"></i> bullhorn</li>
                        <li><i class="fa fa-bell"></i> bell</li>
                        <li><i class="fa fa-certificate"></i> certificate</li>
                        <li><i class="fa fa-hand-o-right"></i> hand-o-right</li>
                        <li><i class="fa fa-hand-o-left"></i> hand-o-left</li>
                        <li><i class="fa fa-hand-o-up"></i> hand-o-up</li>
                        <li><i class="fa fa-hand-o-down"></i> hand-o-down</li>
                        <li><i class="fa fa-arrow-circle-left"></i> arrow-circle-left</li>
                        <li><i class="fa fa-arrow-circle-right"></i> arrow-circle-right</li>
                        <li><i class="fa fa-arrow-circle-up"></i> arrow-circle-up</li>
                        <li><i class="fa fa-arrow-circle-down"></i> arrow-circle-down</li>
                        <li><i class="fa fa-globe"></i> globe</li>
                        <li><i class="fa fa-wrench"></i> wrench</li>
                        <li><i class="fa fa-tasks"></i> tasks</li>
                        <li><i class="fa fa-filter"></i> filter</li>
                        <li><i class="fa fa-group"></i> group</li>
                        <li><i class="fa fa-link"></i> link</li>
                        <li><i class="fa fa-cloud"></i> cloud</li>
                        <li><i class="fa fa-cut"></i> cut</li>
                        <li><i class="fa fa-copy"></i> copy</li>
                        <li><i class="fa fa-paperclip"></i> paperclip</li>
                        <li><i class="fa fa-save"></i> save</li>
                        <li><i class="fa fa-reorder"></i> reorder</li>
                        <li><i class="fa fa-list-ul"></i> list-ul</li>
                        <li><i class="fa fa-list-ol"></i> list-ol</li>
                        <li><i class="fa fa-table"></i> table</li>
                        <li><i class="fa fa-magic"></i> magic</li>
                        <li><i class="fa fa-caret-down"></i> caret-down</li>
                        <li><i class="fa fa-caret-up"></i> caret-up</li>
                        <li><i class="fa fa-caret-left"></i> caret-left</li>
                        <li><i class="fa fa-caret-right"></i> caret-right</li>
                        <li><i class="fa fa-columns"></i> columns</li>
                        <li><i class="fa fa-sort"></i> sort</li>
                        <li><i class="fa fa-sort-down"></i> sort-down</li>
                        <li><i class="fa fa-sort-up"></i> sort-up</li>
                        <li><i class="fa fa-undo"></i> undo</li>
                        <li><i class="fa fa-dashboard"></i> dashboard</li>
                        <li><i class="fa fa-comment"></i> comment</li>
                        <li><i class="fa fa-comments"></i> comments</li>
                        <li><i class="fa fa-bolt"></i> bolt</li>
                        <li><i class="fa fa-sitemap"></i> sitemap</li>
                        <li><i class="fa fa-umbrella"></i> umbrella</li>
                        <li><i class="fa fa-paste"></i> paste</li>
                        <li><i class="fa fa-lightbulb-o"></i> lightbulb-o</li>
                        <li><i class="fa fa-exchange"></i> exchange</li>
                        <li><i class="fa fa-cloud-download"></i> cloud-download</li>
                        <li><i class="fa fa-cloud-upload"></i> cloud-upload</li>
                        <li><i class="fa fa-bell-o"></i> bell-o</li>
                        <li><i class="fa fa-coffee"></i> coffee</li>
                        <li><i class="fa fa-file-o"></i> file-o</li>
                        <li><i class="fa fa-building"></i> building</li>
                        <li><i class="fa fa-angle-double-left"></i> double-angle-left</li>
                        <li><i class="fa fa-angle-double-right"></i> double-angle-right</li>
                        <li><i class="fa fa-angle-double-up"></i> double-angle-up</li>
                        <li><i class="fa fa-angle-double-down"></i> double-angle-down</li>
                        <li><i class="fa fa-angle-left"></i> angle-left</li>
                        <li><i class="fa fa-angle-right"></i> angle-right</li>
                        <li><i class="fa fa-angle-up"></i> angle-up</li>
                        <li><i class="fa fa-angle-down"></i> angle-down</li>
                        <li><i class="fa fa-desktop"></i> desktop</li>
                        <li><i class="fa fa-laptop"></i> laptop</li>
                        <li><i class="fa fa-tablet"></i> tablet</li>
                        <li><i class="fa fa-mobile"></i> mobile</li>
                        <li><i class="fa fa-quote-left"></i> quote-left</li>
                        <li><i class="fa fa-quote-right"></i> quote-right</li>
                        <li><i class="fa fa-spinner"></i> spinner</li>
                        <li><i class="fa fa-circle"></i> circle</li>
                        <li><i class="fa fa-reply"></i> reply</li>
                        <li><i class="fa fa-folder-o"></i> folder-o</li>
                        <li><i class="fa fa-folder-open-o"></i> folder-open-o</li>
                        <li><i class="fa fa-gamepad"></i> gamepad</li>
                        <li><i class="fa fa-keyboard-o"></i> keyboard-o</li>
                        <li><i class="fa fa-flag-o"></i> flag-o</li>
                        <li><i class="fa fa-flag-checkered"></i> flag-checkered</li>
                        <li><i class="fa fa-terminal"></i> terminal</li>
                        <li><i class="fa fa-code"></i> code</li>
                        <li><i class="fa fa-reply-all"></i> reply-all</li>
                        <li><i class="fa fa-star-half-full"></i> star-half-full</li>
                        <li><i class="fa fa-location-arrow"></i> location-arrow</li>
                        <li><i class="fa fa-crop"></i> crop</li>
                        <li><i class="fa fa-code-fork"></i> code-fork</li>
                        <li><i class="fa fa-unlink"></i> unlink</li>
                        <li><i class="fa fa-question"></i> question</li>
                        <li><i class="fa fa-info"></i> info</li>
                        <li><i class="fa fa-shield"></i> shield</li>
                        <li><i class="fa fa-rocket"></i> rocket</li>
                        <li><i class="fa fa-chevron-circle-left"></i> chevron-circle-left</li>
                        <li><i class="fa fa-chevron-circle-right"></i> chevron-circle-right</li>
                        <li><i class="fa fa-chevron-circle-up"></i> chevron-circle-up</li>
                        <li><i class="fa fa-chevron-circle-down"></i> chevron-circle-down</li>
                        <li><i class="fa fa-html5"></i> html5</li>
                        <li><i class="fa fa-anchor"></i> anchor</li>
                        <li><i class="fa fa-unlock-alt"></i> unlock-alt</li>
                        <li><i class="fa fa-bullseye"></i> bullseye</li>
                        <li><i class="fa fa-ellipsis-h"></i> ellipsis-h</li>
                        <li><i class="fa fa-ellipsis-v"></i> ellipsis-v</li>
                        <li><i class="fa fa-rss-square"></i> rss-square</li>
                        <li><i class="fa fa-play-circle"></i> play-circle</li>
                        <li><i class="fa fa-minus-square"></i> minus-square</li>
                        <li><i class="fa fa-minus-square-o"></i> minus-square-o</li>
                        <li><i class="fa fa-level-up"></i> level-up</li>
                        <li><i class="fa fa-level-down"></i> level-down</li>
                        <li><i class="fa fa-check-square"></i> check-sign</li>
                        <li><i class="fa fa-external-link-square"></i> external-link-square</li>
                        <li><i class="fa fa-share-square"></i> share-square</li>
                        <li><i class="fa fa-compass"></i> compass</li>
                        <li><i class="fa fa-expand"></i> expand</li>
                        <li><i class="fa fa-dollar"></i> dollar</li>
                        <li><i class="fa fa-yen"></i> yen</li>
                        <li><i class="fa fa-file-text"></i> file-text</li>
                        <li><i class="fa fa-thumbs-up"></i> thumbs-up</li>
                        <li><i class="fa fa-thumbs-down"></i> thumbs-down</li>
                        <li><i class="fa fa-long-arrow-down"></i> long-arrow-down</li>
                        <li><i class="fa fa-long-arrow-up"></i> long-arrow-up</li>
                        <li><i class="fa fa-long-arrow-left"></i> long-arrow-left</li>
                        <li><i class="fa fa-long-arrow-right"></i> long-arrow-right</li>
                        <li><i class="fa fa-apple"></i> apple</li>
                        <li><i class="fa fa-windows"></i> windows</li>
                        <li><i class="fa fa-android"></i> android</li>
                        <li><i class="fa fa-linux"></i> linux</li>
                        <li><i class="fa fa-sun-o"></i> sun-o</li>
                        <li><i class="fa fa-moon-o"></i> moon-o</li>
                        <li><i class="fa fa-archive"></i> archive</li>
                        <li><i class="fa fa-bug"></i> bug</li>
                        <li><i class="fa fa-weibo"></i> weibo</li>
                        <li><i class="fa fa-renren"></i> renren</li>
                        <li><i class="fa fa-qq"></i> qq</li>
                        <li><i class="fa fa-cube"></i> cube</li>
                        <li><i class="fa fa-align-left"></i> align-left</li>
                      </ul>
                    </div>
                    <p>使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：</p>
                    <ul>
                        <li>图标应具备统一的颜色，如果有交互行为样式也应该保持一致；</li>
                        <li>图标的大小应该保持一致，正文中的图标大小应为14px，标题中的图标可以为28px；</li>
                        <li>图标应与所指示的内容对应，不同地方的同一个指示内容应该使用同一个图标。</li>
                    </ul>
                    <p>如有需要，也可以自定义专有的图标字体。例如需要使用一些Font Awesome中没有定义的图标，或者由于性能要求太高需要去掉Font Awesome中没有用到的图标。</p>
                    <h3 class="item-header" id="glyphicons-how-to-use">如何使用图标？</h3>
                    <p>使用一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>并增加对应的CSS类名即可，用来作为图标的标签不需要包含任何文本也不应该如此。</p>
                    <pre class="prettyprint"><code>&lt;i class="fa fa-star"&gt;&lt;/i&gt;</code></pre>
                    <div class="alert alert-danger">
                        <p>不要将在任何控件标签上直接应用图标CSS类名，应该嵌套一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>标签。</p>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="button" class="page-header">按钮</h2>
                    <p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>
                    <h3 class="item-header" id="button-type">按钮的类型</h3>
                    <p>按钮根据表现形式有如下类型：</p>
                    <table class="table">
                        <tr>
                            <th class="col-md-4">按钮</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-primary">主要按钮</button>
                            </td>
                            <td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-default">标准按钮</button>
                            </td>
                            <td>页面上的普通按钮，例如取消表单、重置输入等。</td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-link">链接按钮</button>
                            </td>
                            <td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-default">按钮组</button>
                                    <button class="btn btn-default">第二个</button>
                                    <button class="btn btn-default">第三个</button>
                                </div>
                            </td>
                            <td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="button-size">按钮的大小</h3>
                    <table class="table">
                        <tr>
                            <th class="col-md-6">实例</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-lg btn-primary" type="button">较大的按钮</button>
                                <button class="btn btn-lg" type="button">较大的按钮</button>
                            </td>
                            <td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-primary" type="button">默认大小</button>
                                <button class="btn btn-default" type="button">默认大小</button>
                            </td>
                            <td>默认大小</td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
                                <button class="btn btn-sm" type="button">较小的按钮</button>
                            </td>
                            <td>较小的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
                                <button class="btn btn-mini" type="button">迷你按钮</button>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
                                <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
                            </td>
                            <td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="button-state">按钮的不同状态</h3>
                    <table class="table">
                        <tr>
                            <th class="col-md-4">实例</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-default"><i class="fa fa-edit"></i> 带图标的按钮</button>
                            </td>
                            <td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
                            </td>
                            <td>
                                状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="btn-group" data-toggle="buttons-checkbox">
                                    <button type="button" class="btn btn-default">Left</button>
                                    <button type="button" class="btn btn-default">Middle</button>
                                    <button type="button" class="btn btn-default">Right</button>
                                </div>
                            </td>
                            <td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="btn-group" data-toggle="buttons-radio">
                                    <button type="button" class="btn btn-default">Left</button>
                                    <button type="button" class="btn btn-default">Middle</button>
                                    <button type="button" class="btn btn-default">Right</button>
                                </div>
                            </td>
                            <td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="btn-group" data-toggle="buttons-radio">
                                    <button type="button" class="btn btn-default"><i class="fa fa-star"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-star-o"></i></button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-heart"></i></button>
                                </div>
                            </td>
                            <td>在互斥的状态切换组中使用图标更加简洁明了。</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" id="myButton" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>

                            </td>
                            <td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#" class="btn btn-primary disabled">已禁用的操作</a>
                                <a href="#" class="btn disabled">禁用的操作</a>
                            </td>
                            <td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="button-color">按钮的颜色</h3>
                    <p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
                    <table class="table">
                        <tr>
                            <th class="col-md-3">实例</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-default">默认</button>
                            </td>
                            <td>带渐变的标准灰色按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-primary">主要</button>
                            </td>
                            <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-info">信息</button>
                            </td>
                            <td>默认样式的替代样式</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-success">成功</button>
                            </td>
                            <td>表示成功或积极的动作</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-warning">警告</button>
                            </td>
                            <td>提醒应该谨慎采取这个动作</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-danger">危险</button>
                            </td>
                            <td>表示这个动作危险或存在危险</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="button-other-color">其他颜色的按钮</h3>
                    <p>其他颜色的按钮提供更多的色彩选择来丰富页面。</p>
                    <table class="table">
                        <tr>
                            <th class="col-md-3">实例</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-blue">蓝色</button>
                            </td>
                            <td>蓝色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-sky">天蓝色</button>
                            </td>
                            <td>天蓝色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-azure">蔚蓝色</button>
                            </td>
                            <td>蔚蓝色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-palegreen">浅绿色</button>
                            </td>
                            <td>浅绿色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-darkorange">深橙色</button>
                            </td>
                            <td>深橙色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-magenta">洋红色</button>
                            </td>
                            <td>洋红色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-purple">紫色</button>
                            </td>
                            <td>紫色的按钮</td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-maroon">魔力红</button>
                            </td>
                            <td>魔力红的按钮</td>
                        </tr>
                        
                    </table>
                </div>
                <div class="bs-docs-section">
                    <h2 id="progress" class="page-header">进度条</h2>
                    <p class="lead">提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
                    <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。 </p>
                    <h3 class="item-header" id="progress-type">基本类型</h3>
                    <table class="table col-md-12">
                        <tr>
                            <th width='40%'>进度条</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>默认的进度条</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="progress-color">进度条的颜色</h3>
                    <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
                    <table class="table col-md-12">
                        <tr>
                            <th width='40%'>进度条</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>主要/默认</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>信息</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>成功</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </td>
                            <td>警告</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                        <span class="sr-only">80% Complete (danger)</span>
                                    </div>
                                </div>
                            </td>
                            <td>危险</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>成功</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="progress-action">进度条的效果</h3>
                    <p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
                    <table class="table col-md-12">
                        <tr>
                            <th width='40%'>进度条</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress progress-striped">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                            <td>条纹效果</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                        <span class="sr-only">45% Complete</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" style="width: 35%">
                                        <span class="sr-only">35% Complete (success)</span>
                                    </div>
                                    <div class="progress-bar progress-bar-warning" style="width: 20%">
                                        <span class="sr-only">20% Complete (warning)</span>
                                    </div>
                                    <div class="progress-bar progress-bar-danger" style="width: 10%">
                                        <span class="sr-only">10% Complete (danger)</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="bs-docs-section">
                    <h2 id="labels" class="page-header">标签 </h2>
                    <h3 class="item-header" id="labels-style">基本样式</h3>
                    <table class="table labels">
                        <tr>
                            <th width='200px'>标签</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <h1><span class="label label-default">New</span></h1></td>
                            <td>h1</td>
                        </tr>
                        <tr>
                            <td>
                                <h2><span class="label label-default">New</span></h2></td>
                            <td>h2</td>
                        </tr>
                        <tr>
                            <td>
                                <h3><span class="label label-default">New</span></h3></td>
                            <td>h3</td>
                        </tr>
                        <tr>
                            <td>
                                <h4><span class="label label-default">New</span></h4></td>
                            <td>h4</td>
                        </tr>
                        <tr>
                            <td>
                                <h5><span class="label label-default">New</span></h5></td>
                            <td>h5</td>
                        </tr>
                        <tr>
                            <td>
                                <h6><span class="label label-default">New</span></h6></td>
                            <td>h6</td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="labels-color">标签的颜色</h3>
                    <table class="table" style='text-align:left'>
                        <tr>
                            <th width='200px'>标签</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td><span class="label label-default">Default</span></td>
                            <td><code>.label-default</code></td>
                        </tr>
                        <tr>
                            <td><span class="label label-primary">Primary</span></td>
                            <td><code>.label-primary</code></td>
                        </tr>
                        <tr>
                            <td><span class="label label-success">Success</span></td>
                            <td><code>.label-success</code></td>
                        </tr>
                        <tr>
                            <td><span class="label label-info">Info</span></td>
                            <td><code>.label-info</code></td>
                        </tr>
                        <tr>
                            <td><span class="label label-warning">Warning</span></td>
                            <td><code>.label-warning</code></td>
                        </tr>
                        <tr>
                            <td><span class="label label-danger">Danger</span></td>
                            <td><code>.label-danger</code></td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="badge">徽标</h3>
                    <p>给链接、导航等元素嵌套 <code>&lt;span class="badge"&gt;</code> 元素，可以很醒目的展示新的或未读的信息条目。</p>
                    <div class="bs-example" data-example-id="simple-badges">
                        <a href="#">Inbox <span class="badge">42</span></a>
                        <br><br>
                        <button class="btn btn-primary" type="button">
                          Messages <span class="badge">4</span>
                        </button>
                      </div>
                    <p>按钮中的徽标</p>
                    <div class='bs-example' contenteditable="true">
                        <button class="btn">列表 <span class="badge">12</span></button>
                        <button class="btn">处理错误 <span class="badge badge-primary">12</span></button>
                        <button class="btn">处理错误 <span class="badge badge-success">12</span></button>
                        <button class="btn">处理错误 <span class="badge badge-info">12</span></button>
                        <button class="btn">处理错误 <span class="badge badge-warning">12</span></button>
                        <button class="btn">处理错误 <span class="badge badge-danger">12</span></button>
                        <br>
                        <br>
                        <button class="btn btn-primary">联系人 <span class="badge">12</span></button>
                        <button class="btn btn-success">联系人 <span class="badge">12</span></button>
                        <button class="btn btn-info">联系人 <span class="badge">12</span></button>
                        <button class="btn btn-warning">联系人 <span class="badge">12</span></button>
                        <button class="btn btn-danger">联系人 <span class="badge">12</span></button>
                    </div>
                    <p>列表组中的徽标和标签</p>
                    <div class='bs-example' contenteditable="true">
                        <div class="list-group">
                            <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击 <span class="badge badge-primary">Primary</span></a>
                            <a href="#" class="list-group-item">todo </a>
                            <a href="#" class="list-group-item">story <span class="badge badge-primary">Primary</span></a>
                            <a href="#" class="list-group-item">bug <span class="badge badge-primary">Warning</span></a>
                            <a href="#" class="list-group-item">case <span class="badge badge-danger">123</span></a>
                        </div>
                    </div>
                    <h3 class="item-header" id="badge-color">徽标的颜色</h3>
                    <table class="table" style='text-align:left'>
                        <tr>
                            <th width='200px'>标签</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td><span class="badge">Default</span></td>
                            <td><code>.badge</code></td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-primary">Primary</span></td>
                            <td><code>.badge-primary</code></td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-success">Success</span></td>
                            <td><code>.badge-success</code></td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-info">Info</span></td>
                            <td><code>.badge-info</code></td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-warning">Warning</span></td>
                            <td><code>.badge-warning</code></td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-danger">Danger</span></td>
                            <td><code>.badge-danger</code></td>
                        </tr>
                    </table>
                </div>
                <div class="bs-docs-section">
                    <h2 class="page-header" id="input">文本框  </h2>
                    <h3 class="item-header" id="input-type">基本类型</h3>
                    <table class="table">
                        <tr>
                            <th width='200px'>文本框</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="email" class='form-control' placeholder="Enter email">
                            </td>
                            <td>input type='email'</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class='form-control' placeholder="Text input">
                            </td>
                            <td>input type='text'</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" value="">
                            </td>
                            <td>input type='checkbox'</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" checked>
                            </td>
                            <td>input type='radio''</td>
                        </tr>
                        <tr>
                            <td>
                                <textarea class='form-control' rows="3"></textarea>
                            </td>
                            <td>textarea row='3'</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="file" value="">
                            </td>
                            <td>file</td>
                        </tr>
                        <tr>
                            <td>
                                <select class="form-control">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </td>
                            <td>select </td>
                        </tr>
                    </table>
                    <h3 class="item-header" id="input-state">状态</h3>
                    <table class="table">
                        <tr>
                            <th width='200px'>文本框</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
                                <br />
                            </td>
                            <td>禁用：input type='text' diabled</td>
                        </tr>
                        <tr>
                            <td>
                                <input class="form-control form-focus" type="text" placeholder="Focused input here...">
                                <br />
                            </td>
                            <td>焦点：input type='text' class='form-focus'</td>
                        </tr>
                        <tr>
                            <td>
                                <div class='has-warning'>
                                    <input class="form-control" type="text" placeholder="Has warnig input here...">
                                </div>
                                <br />
                            </td>
                            <td>has-warning</td>
                        </tr>
                        <tr>
                            <td>
                                <div class='has-error'>
                                    <input class="form-control" type="text" placeholder="Has error input here...">
                                </div>
                                <br />
                            </td>
                            <td>has-error</td>
                        </tr>
                        <tr>
                            <td>
                                <div class='has-success'>
                                    <input class="form-control" type="text" placeholder="Has success input here...">
                                </div>
                                <br />
                            </td>
                            <td>has-success</td>
                        </tr>
                    </table>
                    <h3 class="item-header">变化</h3>
                    <h4 class="subitem-header" id="input-height">高度</h4>
                    <table class="table">
                        <tr>
                            <th width='200px'>文本框</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>
                                <input class="form-control input-lg" type="text" placeholder=".input-lg">
                            </td>
                            <td>.input-lg</td>
                        </tr>
                        <tr>
                            <td>
                                <input class="form-control" type="text" placeholder="Default input">
                            </td>
                            <td>Default iinput</td>
                        </tr>
                        <tr>
                            <td>
                                <input class="form-control input-sm" type="text" placeholder=".input-sm">
                            </td>
                            <td>.input-sm</td>
                        </tr>
                    </table>
                    <h4 class="subitem-header" id="input-width">宽度</h4>
                    <div class="row">
                        <div class="col-xs-2">
                            <input type="text" class="form-control" placeholder=".col-xs-2">
                        </div>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" placeholder=".col-xs-3">
                        </div>
                        <div class="col-xs-4">
                            <input type="text" class="form-control" placeholder=".col-xs-4">
                        </div>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 class="page-header" id="breadcrumb">面包屑</h2>
                    <ul class="breadcrumb">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Library</a></li>
                      <li class="active">Data</li>
                    </ul>
                </div>
                <div class="bs-docs-section">
                    <h2 id="images" class="page-header">图片<a class="anchorjs-link" href="#images"><span class="anchorjs-icon"></span></a></h2>
                    <h3 class="item-header" id="images-responsive">响应式图片<a class="anchorjs-link" href="#images-responsive"><span class="anchorjs-icon"></span></a></h3>
                    <p>在 Bootstrap 版本 3 中，通过为图片添加 <code>.img-responsive</code> 类可以让图片支持响应式布局。其实质是为图片设置了 <code>max-width: 100%;</code>、 <code>height: auto;</code> 和 <code>display: block;</code> 属性，从而让图片在其父元素中更好的缩放。</p>
                    <p>如果需要让使用了 <code>.img-responsive</code> 类的图片水平居中，请使用 <code>.center-block</code> 类，不要用 <code>.text-center</code>。</p>
                    <div class="highlight">
                            <pre class="prettyprint">
&lt;img src="..." class="img-responsive" alt="Responsive image"&gt;
                            </pre>
                    </div>
                    <h3 class="item-header" id="images-shapes">图片形状<a class="anchorjs-link" href="#images-shapes"><span class="anchorjs-icon"></span></a></h3>
                    <div class="bs-example bs-example-images">
                      <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
                      <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
                      <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
                    </div>
                    <div class="highlight">
                            <pre class="prettyprint">
&lt;img src="..." alt="..." class="img-rounded"&gt;
&lt;img src="..." alt="..." class="img-circle"&gt;
&lt;img src="..." alt="..." class="img-thumbnail"&gt;
                            </pre>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="thumbnails" class="page-header">缩略图<a class="anchorjs-link" href="#thumbnails"><span class="anchorjs-icon"></span></a></h2>
                    <h3 class="item-header" id="thumbnails-default">默认样式的实例<a class="anchorjs-link" href="#thumbnails-default"><span class="anchorjs-icon"></span></a></h3>
                    <p>缩略图的默认设计仅需最少的标签就能展示带链接的图片。</p>
                    <div class="bs-example">
                      <div class="row">
                        <div class="col-xs-6 col-md-3">
                          <a href="#" class="thumbnail">
                            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
                          </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="#" class="thumbnail">
                            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
                          </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="#" class="thumbnail">
                            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
                          </a>
                        </div>
                        <div class="col-xs-6 col-md-3">
                          <a href="#" class="thumbnail">
                            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
                          </a>
                        </div>
                      </div>
                    </div><!-- /.bs-example -->
                    <div class="highlight">
                            <pre class="prettyprint">
&lt;div class="row"&gt;
    &lt;div class="col-xs-6 col-md-3"&gt;
        &lt;a href="#" class="thumbnail"&gt;
          &lt;img src="..." alt="..."&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    ...
&lt;/div&gt;
                            </pre>
                    </div>
                    <h3 class="item-header" id="thumbnails-custom-content">自定义内容<a class="anchorjs-link" href="#thumbnails-custom-content"><span class="anchorjs-icon"></span></a></h3>
                    <p>添加一点点额外的标签，就可以把任何类型的 HTML内容，例如标题、段落或按钮，加入缩略图组件内。</p>
                    <div class="bs-example">
                      <div class="row">
                        <div class="col-sm-6 col-md-4">
                          <div class="thumbnail">
                            <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
                            <div class="caption">
                              <h3 class="item-header">Thumbnail label</h3>
                              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                          <div class="thumbnail">
                            <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
                            <div class="caption">
                              <h3 class="item-header">Thumbnail label</h3>
                              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                          <div class="thumbnail">
                            <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
                            <div class="caption">
                              <h3 class="item-header">Thumbnail label</h3>
                              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div><!-- /.bs-example -->
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;div class="row"&gt;
  &lt;div class="col-sm-6 col-md-4"&gt;
    &lt;div class="thumbnail"&gt;
      &lt;img data-src="holder.js/300x300" alt="..."&gt;
     &lt;div class="caption"&gt;
        &lt;h3&gt;Thumbnail label&lt;/h3&gt;
        &lt;p&gt;...&lt;/p&gt;
        &lt;p&gt;
            &lt;a href="#" class="btn btn-primary" role="button"&gt;Button&lt;/a&gt; 
            &lt;a href="#" class="btn btn-default" role="button"&gt;Button&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/div>
                </div>
            </div>
                <div class="bs-docs-section">
                    <h2 class="page-header" id="title">标题  </h2>
                    <h3 class="item-header" id="title-type">类型</h3>
                    <h4 class="subitem-header" id="title-default">标准内容标题</h4>
                    <p>内容标题用来对一段内容进行总结。内容标题有1-6个级别，用html中的<code>h1</code>、<code>h2</code>...<code>h6</code>来应用样式</p>
                    <table class="table basic-titles">
                      <thead>
                        <tr>
                          <th style="width:30%">元素</th>
                          <th>标签</th>
                          <th>像素大小</th>
                          <th>说明</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <h1>Heading1 一级标题</h1>
                          </td>
                          <td><code>&lt;h1&gt;</code></td>
                          <td>36px</td>
                          <td>在一个页面（或在<code>hgroup</code>标记的范围内）只有一个页面标题。</td>
                        </tr>
                        <tr>
                          <td><h2>Heading2 二级标题</h2></td>
                          <td><code>&lt;h2&gt;</code></td>
                          <td>30px</td>
                          <td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
                        </tr>
                        <tr>
                          <td><h3>Heading3 三级标题</h3></td>
                          <td><code>&lt;h3&gt;</code></td>
                          <td>24px 粗体</td>
                          <td>页面第三级标题，嵌套在二级标题下使用。</td>
                        </tr>
                        <tr>
                          <td><h4>Heading4 四级标题</h4></td>
                          <td><code>&lt;h4&gt;</code></td>
                          <td>18px 粗体</td>
                          <td>页面第四级标题，嵌套在三级标题下使用。</td>
                        </tr>
                        <tr>
                          <td><h5>Heading5 五级标题</h5></td>
                          <td><code>&lt;h5&gt;</code></td>
                          <td>14px 粗体 颜色灰色</td>
                          <td>页面第五级标题，嵌套在四级标题下使用。</td>
                        </tr>
                        <tr>
                          <td><h6>Heading6 六级标题</h6></td>
                          <td><code>&lt;h6&gt;</code></td>
                          <td>12px 粗体 颜色灰色</td>
                          <td>页面第六级标题，嵌套在五级标题下使用。</td>
                        </tr>
                          </tbody>
                    </table>

                    <h4 class="subitem-header" id="title-extra">带额外内容的标题</h4>
                    <p>标题中可以加入解释性的文本，这些文本通过一个<code>small</code>标签加入。</p>
                    <div class="bs-example extra-titles" contenteditable="true">
                      <h1>Heading1 标题1 <small>额外的标题 secondary headings</small></h1>
                      <h2>Heading2 标题2 <small>额外的标题 secondary headings</small></h2>
                      <h3>Heading3 标题3 <small>额外的标题 secondary headings</small></h3>
                      <h4>Heading4 标题4 <small>额外的标题 secondary headings</small></h4>
                      <h5>Heading5 标题5 <small>额外的标题 secondary headings</small></h5>
                      <h6>Heading6 标题6 <small>额外的标题 secondary headings</small></h6>
                    </div>

                    <h4 class="subitem-header" id="title-explain">单独一行的解释性文本</h4>
                    <div class="bs-example" contenteditable="true">
                      <h2>Heading1 标题1 <small class="block">这是关于标题的解释性文本 secondary headings</small></h2>
                    </div>

                    <h4 class="subitem-header" id="title-icon">带图标的标题</h4>
                    <p>页面标题与其他控件完美整合在一起。</p>
                    <div class="bs-example" contenteditable="true">
                      <h2><i class="fa fa-film"></i> 带图标的标题</h2>
                    </div>

                    <h3 class="item-header" id="title-options">参数</h3>

                    <h4 class="subitem-header" id="title-dividing"><code>.header-dividing</code></h4>
                    <p>带底部水平分隔线的标题</p>
                    <div class="bs-example header-dividing-wrapper" contenteditable="true">
                      <h3 class="item-header" class="header-dividing">标题</h3>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 class="page-header" id="spiliter">分隔线 </h2>
                    <h3 class="item-header" id="horizon-spiliter-line">水平分隔直线</h3>
                    <div class="bs-example" contenteditable="true">
                      <hr>
                    </div>
                    <h3 class="item-header" id="horizon-spiliter-dotted">水平分隔点线</h3>
                    <div class="bs-example" contenteditable="true">
                      <hr class="hr-dotted">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
                    <ul class="nav bs-docs-sidenav">
                        <li>
                            <a href="#glyphicons">图标</a>
                            <ul class="nav">
                                <li><a href="#glyphicons-when-to-use">何时使用图标</a>
                                </li>
                                <li><a href="#glyphicons-examples">使用图标字体</a>
                                </li>
                                <li><a href="#glyphicons-how-to-use">如何使用图标</a>
                                </li>

                            </ul>
                        </li>
                        <li>
                            <a href="#button">按钮</a>
                            <ul class="nav">
                                <li><a href="#button-type">按钮的类型</a>
                                </li>
                                <li><a href="#button-size">按钮的大小</a>
                                </li>
                                <li><a href="#button-state">按钮的不同状态</a>
                                </li>
                                <li><a href="#button-color">按钮的颜色</a>
                                </li>
                                <li><a href="#button-other-color">其他颜色的按钮</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#progress">进度条</a>
                            <ul class="nav">
                                <li><a href="#progress-type">进度条的类型</a>
                                </li>
                                <li><a href="#progress-color">进度条的颜色</a>
                                </li>
                                <li><a href="#progress-action">进度条的效果</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#labels">标签</a>
                            <ul class="nav">
                                <li><a href="#labels-style">基本样式</a>
                                </li>
                                <li><a href="#labels-color">标签的颜色</a>
                                </li>
                                <li><a href="#badge">徽标</a>
                                </li>
                                <li><a href="#badge-color">徽标的颜色</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#input">文本框</a>
                            <ul class="nav">
                                <li><a href="#input-type">基本类型</a>
                                </li>
                                <li><a href="#input-state">状态</a>
                                </li>
                                <li><a href="#input-height">高度</a>
                                </li>
                                <li><a href="#input-width">宽度</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#breadcrumb">面包屑</a>
                        </li>
                        <li>
                            <a href="#images">图片</a>
                            <ul class="nav">
                                <li><a href="#images-responsive">响应式图片</a>
                                </li>
                                <li><a href="#images-shapes">图片形状</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#thumbnails">缩略图</a>
                            <ul class="nav">
                                <li><a href="#thumbnails-default">默认样式的实例</a>
                                </li>
                                <li><a href="#thumbnails-custom-content">自定义内容</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#title">标题</a>
                            <ul class="nav">
                                <li><a href="#title-type">基本类型</a>
                                </li>
                                <li><a href="#title-default">标准内容标题</a>
                                </li>
                                 <li><a href="#title-extra">带额外内容的标题</a>
                                </li>
                                 <li><a href="#title-explain">单独一行的解释性文本</a>
                                </li>
                                <li><a href="#title-icon">带图标的标题</a>
                                </li>
                                 <li><a href="#title-options">参数</a>
                                </li>
                                 <li><a href="#title-dividing">带底部水平分隔线的标题</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#spiliter">分隔线</a>
                            <ul class="nav">
                                <li><a href="#horizon-spiliter-line">水平分隔直线</a>
                                </li>
                                <li><a href="#horizon-spiliter-dotted">水平分隔点线</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <a class="back-to-top" href="#top">
              返回顶部
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="libs/jquery/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="assets/plugins/google-code-prettify/prettify.js"></script>
    <script src="assets/js/docs.min.js"></script>
    <script>
      $('#myButton').on('click', function () {
        var $btn = $(this).button('loading');
        // business logic...
        setTimeout(function(){
            $btn.button('reset');
        },2000);
        
      })
    </script
</body>

</html>
